<template>
  <div class="pass">
    <div class="pass_left">
      <div class="pass_left_en">psw manage</div>
      <div class="pass_left_cn" >密码管理</div>
      <div class="pass_left_desc">私人密码管理</div>
      <div class="pass_left_login" @click="loginShow = true">需要登录查看</div>
    </div>
    <div class="pass_right">
      <img src="../../assets/pass.png" alt="" />
    </div>
  </div>

  <div class="pass_login" :class="{ passLoginShow: loginShow }">
    <div class="pass_login_header">
      <img
        class="pass_login_header_left"
        src="../../assets/pass/lock.png"
        alt=""
      />
      <img
        class="pass_login_header_right"
        src="../../assets/pass/close.png"
        alt=""
        @click="loginShow = false"
      />
    </div>
    <div class="pass_login_content">
      <div class="pass_login_content_desc">此内容受密码保护</div>
      <div class="pass_login_content_confirm">请输入您的密码</div>
      <div class="pass_login_content_input">
        <input v-model="password" type="password" placeholder="请输入密码" />
      </div>
    </div>

    <div class="pass_login_register">
      <div class="pass_login_register_left">忘记密码？</div>
    </div>

    <div class="pass_login_footer">
      <div class="pass_login_footer_left" @click="loginShow = false">取消</div>
      <div class="pass_login_footer_right" @click="confirmPassword">确定</div>
    </div>
  </div>

  <check v-if="shoPas" @someEvent="someEvent"/>
</template>
<script setup lang="ts">
import check from './check.vue'
import {cwMessage} from "../../store"
import { ref,onMounted } from "vue";
const loginShow = ref(false);
const password = ref("");

onMounted(()=>{
  let toolBlogPass = localStorage.getItem('searchParam')
  if(toolBlogPass){
    password.value = toolBlogPass
  }
})

const shoPas = ref(false)
const confirmPassword = () => {
  if (password.value === "123456") {
    localStorage.setItem("toolBlogPass",'123456')
    loginShow.value = false;
    shoPas.value = true
  }
};
const someEvent = ()=>{
    shoPas.value = false
}








</script>
<style lang="less" scoped>
.pass {
  cursor: pointer;
  width: 100%;
  display: flex;
  justify-content: center;
  .pass_left {
    width: 250px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding-left: 50px;
    .pass_left_en {
      font-size: 12px;
      font-weight: bold;
      color: #ccc;
      &:after {
        content: "";
        display: block;
        width: 20px;
        height: 1px;
        background-color: #cccccc7c;
        margin-top: 4px;
      }
    }
    .pass_left_cn {
      font-size: 42px;
      font-weight: bold;
      color: #000;
      margin: 10px 0;
    }
    .pass_left_desc {
      font-size: 20px;
      color: #ccc;
      margin: 10px 0;
    }
    .pass_left_login {
      font-size: 20px;
      margin: 10px 0;
      background-color: #01ce87;
      border-radius: 5px;
      padding: 10px 20px;
      cursor: pointer;
      letter-spacing: 2px;
      color: #fff;
    }
  }
  .pass_right {
    height: 100%;
    width: 750px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.pass_login {
  cursor: pointer;
  position: absolute;
  width: 400px;
  height: 250px;
  left: 50%;
  top: 20%;
  transform: translate(-50%);
  background-color: #fffefe;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  transform: translate(-50%) scale(0);
  transition: all 0.2s ease-in-out;

  &.passLoginShow {
    transform: translate(-50%) scale(1);
  }
  .pass_login_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .pass_login_header_left {
      width: 60px;
      height: 60px;
      cursor: pointer;
    }
    .pass_login_header_right {
      width: 20px;
      height: 20px;
    }
  }
}
.pass_login_content {
  display: flex;
  flex-direction: column;
  padding: 0px 5px;
  .pass_login_content_desc {
    font-size: 20px;
    color: #000000;
    margin: 10px 0;
  }
  .pass_login_content_confirm {
    font-size: 16px;
    color: #ccc;
    margin: 4px 0;
  }
  .pass_login_content_input {
    input {
      outline: none;
      border: none;
      width: 95%;
      height: 10px;
      border: 1px solid #bebebe;
      border-radius: 5px;
      padding: 10px 10px;
      margin: 4px 0;
    }
  }
}
.pass_login_register {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.pass_login_register_left {
  font-size: 12px;
  color: #ccc;
  position: absolute;
  right: 1%;
  top: 2px;
}

.pass_login_footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30px;
  .pass_login_footer_left {
    background-color: #fff;
    font-size: 12px;
    color: #000000;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #01ce87;
    margin-right: 20px;
    width: 80px;
    text-align: center;
    letter-spacing: 2px;
  }
  .pass_login_footer_right {
    font-size: 12px;
    color: #ffffff;
    cursor: pointer;
    background-color: #037aff;
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #01ce87;
    width: 80px;
    text-align: center;
    letter-spacing: 2px;
  }
}
</style>
